<template>
	<view class="curriculum-box">
		<u-navbar title="校区管理">
			<view slot="right" style="margin-right: 40upx;font-size: 40upx;font-weight: bold;margin-bottom: 30upx;" @click="getRouter">...</view>
		</u-navbar>
		<view class="link-u"></view>
		<view class="curriculum-auto">
			<view class="nav-fl">
				<view v-for="(item,index) in list" :key="index">
					<view :class="curror == index ? 'nav-fl-div-ch' : 'nav-fl-div'" @click="getCurror(index, item)">{{ item }}</view>
				</view>
			</view>
			<view class="curriculum-type" v-if="type == '课程' || type == '师资' || type == '咨询师'">
				<u-form-item :label-position="labelPosition" label="课程类型：" prop="goodsType" label-width="150">
					<u-input :border="border" type="select" :select-open="selectShow" v-model="model.goodsType" placeholder="请选择课程类型" @click="selectShow = true"></u-input>
				</u-form-item>
				<u-select mode="mutil-column-auto" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
			</view>
		</view>
		<view class="curriculum-bottom">
			<u-row gutter="16" v-if="type == '课程'" v-for="item in 4" :key="item" @click="CourseDetails('/pages/campus/CourseDetails')">
				<u-col span="4">
					<view class="demo-layout bg-purple">
						<u-image width="100%" height="220rpx" :src="src"></u-image>
					</view>
				</u-col>
				<u-col span="8" style="padding: 0px 6px 0px 22upx;">
					<view class="demo-layout bg-purple-light" style="text-align: justify;">
						<view class="curriculum-bottom-title">成人英语新概念英语</view>
						<view class="curriculum-bottom-branchclass">语言培训-成人英语-新概念</view>
						<view class="curriculum-bottom-introduce">专为中国的英语学习人士而改编，根专为中国的英语学习人士而改编，根</view>
					</view>
				</u-col>
			</u-row>
			<u-row gutter="16" v-if="type == '校区'" v-for="item in 4" :key="item" @click="CourseDetails('/pages/campus/CampusDetails')">
				<u-col span="4.5">
					<view class="demo-layout bg-purple">
						<u-image width="240upx" height="160upx" :src="src" border-radius="10"></u-image>
					</view>
				</u-col>
				<u-col span="7.5">
					<view class="demo-layout bg-purple-light" style="margin-left: 10upx;">
						<view class="curriculum-bottom-title">
							<view class="tag-title">JG0001</view>
							<view>抚州临川校区</view>
						</view>
						<view class="curriculum-bottom-branchclass" style="margin-top: 6upx;margin-bottom: 0upx;">江西-抚州-临川</view>
						<view style="margin-top: 6upx;">
							<u-icon name="account" style="margin-right: 5px;"></u-icon>
							<text style="margin-right: 20upx;">林川</text>
							<u-icon name="phone" style="margin-right: 5px;"></u-icon>
							<text>18079442428</text>
						</view>
						<view style="font-size: 22upx;color: #888888;margin-top: 6upx;">创建时间：2021.03.15 12:09</view>
					</view>
				</u-col>
			</u-row>
			<u-row gutter="16" v-if="type == '师资'" v-for="item in 4" :key="item" @click="CourseDetails('/pages/campus/teachersDetail')">
				<u-col span="4">
					<view class="demo-layout bg-purple">
						<u-image width="195rpx" height="175rpx" :src="src"></u-image>
					</view>
				</u-col>
				<u-col span="8">
					<view class="demo-layout bg-purple-light" style="text-align: justify;">
						<view class="curriculum-bottom-title">赵海洋</view>
						<view class="curriculum-bottom-branchclass" style="font-size: 24upx;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;">赵海洋，河南驻马店人，生于1988年3月31日， 2009年毕业于中央音乐学院，专业从事钢琴…</view>
						<view class="curriculum-bottom-introduce" style="height: 39upx;font-size: 24upx;padding: 2upx;">语言培训—成人英语-新概念英语</view>
					</view>
				</u-col>
			</u-row>
			<view class="Consultant-box" v-if="type == '咨询师'" v-for="item in 4" :key="item" @click.stop="Consultantdetails" >
				<u-row gutter="16">
					<u-col span="12">
						<view class="Consultant-box-view1">赵海洋</view>
					</u-col>
					<u-col span="9">
						<view class="Consultant-box-view2">所属校区：抚州临川校区</view>
					</u-col>
					<u-col span="3">
						<view class="Consultant-box-view3" @click.stop="ChangePassword">修改密码<u-icon name="arrow-right" color="#87B847" size="25"></u-icon></view>
					</u-col>
					<u-col span="12">
						<view class="Consultant-box-view4">课程专业：语言培训-成人英语-新概念英语</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="btn" @click="getOpen()">添加</view>
		<u-back-top style="background-color: #0081f1;" :scrollTop="scrollTop" :mode="mode" :bottom="bottom" :right="right" :top="top" :icon="icon" :custom-style="customStyle" :icon-style="iconStyle" :tips="tips"></u-back-top>
		<bottom/>
	</view>
</template>

<script>
	import bottom from '../../components/bottom/index.vue'
	export default {
		components:{ bottom },
		data() {
			return {
				list: ['课程', '校区', '师资', '咨询师'],
				scrollTop: 0,
				mode: 'circle',
				bottom: 150,
				right: 40,
				top: 100,
				icon: 'plus',
				iconStyle: {
					color: '#fff',
					fontSize: '38rpx'
				},
				customStyle: {},
				tips: '',
				src: 'http://1812.img.pp.sohu.com.cn/images/blog/2009/11/18/18/8/125b6560a6ag214.jpg',
				model: {
					goodsType: '',
				},
				curror: '0',
				show: false,
				selectList: [
					{
						value: 1,
						label: '语言培训',
						children: [
							{
								value: 2,
								label: '成人英语',
								children: [
									{
										value: 3,
										label: '新概念英语'
									},
									{
										value: 4,
										label: '零基础英语'
									}
								]
							},
							{
								value: 5,
								label: '广西',
								children: [
									{
										value: 6,
										label: '南宁'
									},
									{
										value: 7,
										label: '桂林'
									}
								]
							}
						]
					},
					{
						value: 8,
						label: '设计培训',
						children: [
							{
								value: 9,
								label: '网页设计',
								children: [
									{
										value: 10,
										label: 'DW'
									}
								]
							}
						]
					}
				],
				rules: {
					goodsType: [
						{
							required: true,
							message: '请选择商品类型',
							trigger: 'change',
						}
					],
				},
				border: false, 
				selectShow: false,
				labelPosition: 'left',
				errorType: ['message'],
				type: '课程'
			}
		},
		onLoad() {
	
		},
		methods: {
			getOpen () {
				if(this.type == '课程'){
					uni.navigateTo({
						url: '/pages/campus/Creatingcourses'
					})
				} else if(this.type == '校区'){
					uni.navigateTo({
						url: '/pages/campus/Campuscoursrs'
					})
				} else if(this.type == '师资'){
					uni.navigateTo({
						url: '/pages/campus/teachers'
					})
				} else if(this.type == '咨询师'){
					uni.navigateTo({
						url: '/pages/campus/Consultanbings'
					})
				}
			},
			CourseDetails(url){
				uni.navigateTo({
					url: url
				})
			},
			Consultantdetails(){
				uni.navigateTo({
					url: '/pages/campus/Consultantdetails'
				})
			},
			ChangePassword(){
				uni.navigateTo({
					url: '/pages/campus/ChangePassword'
				})
			},
			getCurror(index, item){
				this.curror = index
				this.type = item
			},
			confirm(e) {
				console.log(e);
			},
			// 选择商品类型回调
			selectConfirm(e) {
				this.model.goodsType = '';
				e.map((val, index) => {
					this.model.goodsType += this.model.goodsType == '' ? val.label : '-' + val.label;
				})
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>
<style>
	.curriculum-auto .curriculum-type .u-form-item{
		padding: 0;
	}
	.curriculum-auto .curriculum-type .u-border-bottom:after{
		border-bottom-width: 0;
	}
	.curriculum-auto .curriculum-type .u-input{
		background-color: #fff;
		padding: 0px 10px !important;
	}
	.curriculum-auto .curriculum-type /deep/ .u-form-item--left__content__label{
		color: #888;
	}
	.curriculum-bottom /deep/ .u-row{
		margin-bottom: 15px;
	}
	.curriculum-bottom /deep/ .u-row:nth-last-child(1){
		margin-bottom: 0;
	}
</style>
<style lang="scss" scoped>
	.btn{
		width: 174upx;
		height: 70upx;
		background: linear-gradient(to right, #2BA3FC, #0081F1);
		box-shadow: 0upx 0upx 20upx 0upx rgba(111, 192, 252, 0.9);
		border-radius: 10upx;
		position: fixed;
		bottom: 150upx;
		margin-left: 300upx;
		text-align: center;
		line-height: 70upx;
		color: #FFFFFF;
		font-size: 34upx;
	}
	.curriculum-box{
		padding-bottom: 7vh;
	}
	.curriculum-auto .nav-fl{
		padding: 30upx;
	}
	.curriculum-auto .curriculum-type{
		padding: 30upx;
		background-color: #F4F9FE;
	}
	.curriculum-bottom{
		padding: 30upx;
	}
	.curriculum-bottom .curriculum-bottom-title{
		color: #333333;
		font-size: 32upx;
		font-weight: bolder;
		display: flex;
		align-items: center;
		.tag-title{
			width: 90upx;
			height: 34upx;
			background: rgba(0, 129, 243, 0.1);
			border-radius: 3upx;
			font-size: 20upx;
			font-weight: 500;
			color: #0081F1;
			line-height: 34upx;
			text-align: center;
			margin-right: 10upx;
		}
	}
	.curriculum-bottom .curriculum-bottom-branchclass{
		color: #888888;
		margin: 15upx 0;
	}
	.curriculum-bottom .curriculum-bottom-introduce{
		color: #0081F1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding: 15upx;
		background-color: #F4F9FE;
	}
	.nav-fl{
		width: 100%;
		overflow-y: scroll;
		display: flex;
		.nav-fl-div{
			width: 150upx;
			height: 60upx;
			font-size: 25upx;
			background-color: #F4F9FE;
			line-height: 60upx;
			text-align: center;
			border-radius: 8upx;
			color: #666666;
			margin-right: 20upx;
		}
		.nav-fl-div-ch{
			width: 150upx;
			height: 60upx;
			font-size: 25upx;
			background-color: #0585F2;
			line-height: 60upx;
			text-align: center;
			border-radius: 8upx;
			color: #fff;
			border: 1upx solid #0585F2;
			margin-right: 20upx;
		}
	}
	.Consultant-box{
		padding: 10px; 
		border-radius: 10upx;
		margin-bottom: 40upx;
		box-shadow: 0px 0px 10px 0px rgba(111, 111, 111, 0.28); 
	}
	.Consultant-box:nth-last-child(1){
		margin-bottom: 0;
	}
	.Consultant-box-view1{
		font-weight: bold;
		font-size: 32upx;
		color: #333333;
	}
	.Consultant-box-view2{
		font-size: 24upx;
		color: #888888;
	}
	.Consultant-box-view3{
		color: #87b847;
		font-size: 24upx;
		text-align: right;
		margin: 8px 0;
	}
	.Consultant-box-view4{
		color: #888888;
		font-size: 24upx;
	}
</style>
